"use client";
import React, { useEffect, useState } from 'react';
import { Space, Table, Tag, Button, Modal, Input, Select, DatePicker } from 'antd';
import Myform from "./myform";
import {
  BorderOutlined,
  VerticalAlignBottomOutlined,
  VerticalAlignTopOutlined,
  PlusOutlined,
  SearchOutlined,
  ReloadOutlined
} from '@ant-design/icons';
import * as API from '../../axios/http'

export default function page() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState('添加');
  // 数据
  const [data, setdata] = useState([]);
  const [searchKeyword, setSearchKeyword] = useState('');//
  const [selectedStatus, setSelectedStatus] = useState('');//
  const [selectedDate, setSelectedDate] = useState(null);
  const [searchName, setSearchName] = useState('');//
  const [itemObj, setItemObj] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    API.getLzy().then((res: any) => {
      setdata(res);
    });
  };

  // 时间选择器
  const onChange = (date: any, dateString: any) => {
    setSelectedDate(date);
    console.log(date, dateString);
  };
  // 下拉框
  const handleChange = (value: any) => {
    setSelectedStatus(value);
    console.log(`selected ${value}`);
  };
  // 弹出框
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const columns = [
    {
      title: <BorderOutlined />,
      dataIndex: 12,
      render: () => {
        return <BorderOutlined />;
      },
    },
    {
      title: '关联订单',
      dataIndex: 'title',
      sorter: {},
    },
    {
      title: '订单归属人',
      dataIndex: 'name',
      sorter: {},
    },
    {
      title: '回款期次',
      dataIndex: 'hui',
      sorter: {},
    },
    {
      title: '计划回款金额',
      dataIndex: 'moery',
      sorter: {},
      render: (moery: any) => {
        return <div>￥{moery.toFixed(2)}</div>;
      }
    },
    {
      title: '已回款金额',
      dataIndex: 'yihui',
      sorter: {},
      render: (yihui: any) => {
        return <div>￥{yihui.toFixed(2)}</div>;
      }
    },
    {
      title: '回款日期',
      dataIndex: 'date',
      sorter: {},
    },
    {
      title: '回款状态',
      key: 'tags',
      dataIndex: 'status',
      render: (status: any) => {
        return <Tag color={status === "已完成" ? "green" : status === "未完成" ? "gold" : "red"}>{status}</Tag>;
      },
      sorter: {},
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <div onClick={() => {
            showModal();
            setTitle("编辑");
            setItemObj(record)
          }}>编辑</div>
          <a onClick={() => {
            // 删除
            API.http_dellzy(record.id).then(res => {
              console.log(res);
              setdata(data.filter((item: any) => item.id !== record.id));
            })
          }}>删除</a>
        </Space>
      ),
    },
  ];

  return (
    <>
      <div>
        <div style={{ marginBottom: "5px" }}>
          <Input
            placeholder="请输入关键字"
            style={{ width: "200px" }}
            value={searchKeyword}
            onChange={(e) => setSearchKeyword(e.target.value)}
          />
          <Input
            placeholder="订单归属人"
            style={{ width: "200px", marginLeft: "20px" }}
            value={searchName}
            onChange={(e) => setSearchName(e.target.value)}
          />
          <Select
            style={{ width: "200px", marginLeft: "20px" }}
            onChange={handleChange}
            options={[
              { value: '已完成', label: '已完成' },
              { value: '未完成', label: '未完成' },
              { value: '已逾期', label: '已逾期' },
            ]}
            placeholder="回款状态"
            value={selectedStatus}
          />
          <DatePicker
            onChange={onChange}
            style={{ marginLeft: "20px", width: "200px" }}
            placeholder='计划还款日期'
            value={selectedDate}
          />
          
          <Button type="primary" style={{ marginLeft: "20px" }} onClick={()=>{
            fetchData()
            const obj={
              searchKeyword,
              searchName,
              selectedStatus
            }
            API.http_getlzy(obj).then((res:any)=>{
              setdata(res) 
            })
          }}>
            <SearchOutlined />
            查询
          </Button>
          <Button onClick={() => {
            setSearchKeyword('');
            setSelectedStatus('');
            setSelectedDate(null);
            setSearchName('');
            fetchData();
          }}>
            <ReloadOutlined />
            重置
          </Button>
        </div>
        <div>
          <Button type="primary" onClick={() => {
            showModal();
            setTitle("添加");
          }}>
            <PlusOutlined />
            添加
          </Button>
          &nbsp;&nbsp;
          <Button onClick={() => {
            showModal();
            // setTitle("批量导入");
          }}>
            <VerticalAlignBottomOutlined />
            导入
          </Button>
          &nbsp;&nbsp;
          <Button>
            <VerticalAlignTopOutlined />
            导出
          </Button>
          <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
            <Myform title={title} setdata={setdata} handleOk={handleOk} itemObj={itemObj} />
          </Modal>
          <Table columns={columns} dataSource={data} rowKey="id" />
        </div>
      </div>
    </>
  );
}
    